<template>
  <div ref="code" class="code" @click="$emit('click')">{{ codeText }}</div>
</template>

<script>
export default {
    props: {
        code: {
            type: [String, Number],
            default: ''
        }
    },
    data () {
        return {
            codeText: ''
        }
    },
    watch: {
        code (val) {
            this.codeText = this.getCodeText(val)
        }
    },
    created () {
        this.codeText = this.getCodeText(this.code)
    },
    methods: {
        getCodeText (code) {
            if (code) return code
            var arrays = [
                '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
                'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
                'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
                'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
                'U', 'V', 'W', 'X', 'Y', 'Z'
            ]
            // 重新初始化验证码
            let codes = ''
            // 随机从数组中获取四个元素组成验证码
            for (var i = 0; i < 4; i++) {
            // 随机获取一个数组的下标
            var r = parseInt(Math.random() * arrays.length)
            codes += arrays[r]
            }
            // 验证码添加到input里
            return codes
        }
    }
}
</script>

<style lang="less" scoped>
@import '~ant-design-vue/es/style/themes/default.less';
.code{
    width:120px;
    height:40px;
    background: cornsilk;
    font-size:20px;
    border-radius: 20px;
    line-height: 40px;
    font-family:Arial;
    font-style:italic;
    font-weight:bold;
    border:0;
    letter-spacing:2px;
    color: @primary-color;
    text-align: center;
    user-select: none;
 }
</style>
